<template>
  <v-row class="mt-12">
    <v-col cols="7" offset="1">
      <BlogList ref="blogList" @enterBlogDetail="enterBlogDetail" />
    </v-col>
    <v-spacer />
    <v-col cols="3">
      <v-row style="width: 350px">
        <BulletinBoard ref="bulletinBoard" />
      </v-row>
      <div :class="boardFixed?'fixBoard':''">
        <v-row style="width: 350px">
          <TypeBoard ref="typeBoard" />
        </v-row>
        <v-row style="width: 350px">
          <TagBoard ref="tagBoard" />
        </v-row>
      </div>
    </v-col>
  </v-row>
</template>

<script>
import '@/assets/css/business/blog/blog.scss'
import BlogList from '../content/list/BlogList'
import BulletinBoard from '../content/board/BulletinBoard'
import TypeBoard from '../content/board/TypeBoard.vue'
import TagBoard from '../content/board/TagBoard.vue'
import { mixin } from '@/utils/mixin'

export default {
  name: 'Blog',
  components: {
    BlogList,
    BulletinBoard,
    TypeBoard,
    TagBoard
  },
  mixins: [mixin],
  data: () => ({
    boardFixed: false
  }),
  mounted() {
    // window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const offsetTop = 620
      scrollTop > offsetTop ? this.boardFixed = true : this.boardFixed = false
    },
    enterBlogDetail(blog) {
      this.$store.commit('setBlogDetail', JSON.stringify(blog))
      this.$parent.enterBlogDetail(blog)
    }
  }
}
</script>

<style scoped>

</style>
